<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>花纹样式</title>
  </head>
  <link rel="stylesheet" href="../css/all.css" />
  <style>
    .container {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-start;
      width: 100%;
      height: 100vh;
      background-image: url("../img/bac1.png");
      background-size: cover;
    }

    li::marker {
      display: none;
    }
    li {
      list-style-type: none;
    }
    .header {
      height: 20%;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      justify-content: space-around;
      /* background-color: #008c8c; */
    }
    .header-left {
      display: flex;
      width: 80%;
      height: 100%;
      justify-content: flex-start;
      align-items: center;
      background-image: url("../img/introduce/zuzi.png");
      background-size: 30% 100%;
      background-position: 0%;
      background-repeat: no-repeat;
      padding-left: 30px;
      z-index: 3;
    }
    .logo {
      background-image: url("../img/introduce/logo.png");
      background-size: 198% 360%;
      background-repeat: no-repeat;
      width: 60px;
      height: 55px;
      background-position: 50% 70%;
      cursor: pointer;
      /* background-color: aqua; */
    }
    /* 头部 */
    .title {
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
      font-size: 3.3em;
      font-family: font3;
      color: #789a89;
      padding-left: 14px;
      z-index: 1;
    }
    .header-right {
      display: flex;
      width: 18%;
      height: 100%;
      align-items: center;
      justify-content: flex-start;
      padding-bottom: 23px;
    }
    .header-right > ul {
      display: flex;
      height: 10%;
      width: 15%;
      list-style-type: none;
    }
    .header-right > ul > li {
      position: relative;
      font-family: font3;
      transition: all 0.5s ease;
      height: auto;
      font-size: 2.3em;
      font-weight: bold;
      padding-left: 24px;
      color: #8f3536;
      cursor: pointer;
    }
    .header-right > ul > li.active {
      color: #83a795;
    }
    .header-right > ul > li > a {
      text-decoration: none; /* 取消下划线 */
      color: inherit; /* 继承父元素的文字颜色 */
      cursor: pointer; /* 鼠标悬停时显示手型 */
    }
    .header-right > ul > li:hover {
      transition: all 0.5s ease;
      color: #83a795;
    }
    .header-right > ul > li:not(:first-child)::after {
      content: "";
      width: 4px;
      height: 50px;
      left: 7px;
      position: absolute;
      top: 15px;
      background-color: #8f3536;
    }
    .main {
      display: flex;
      height: 90%;
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      opacity: 0;
      transition: all 0.5s ease;
      /* background-color: #789a89; */
      position: relative;
      margin-top: -20px;

      align-items: center;
    }

    /* 花纹样式 */
    .shell {
      width: 60%;
      height: 500px;
      display: flex;
      position: relative;
      top: -6%;
      overflow: visible;
    }
    .box {
      flex: 1;
      /* overflow: hidden; */
      transition: 0.5s;
      margin: 10px 10px;
      box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      border: 4px solid #903534;
      box-sizing: border-box;
      background-color: #f4eee3;
      overflow: visible;
    }

    .bac1 {
      width: 200%;
      height: 85%;
      position: relative;
      object-fit: cover;
      transition: 0.5s;
      background-size: 117%;
      background-position: 50% 40%;
      overflow: visible;
    }
    .bac-p {
      width: 50%;

      /* font-family: font7; */
      text-align: center;
      background-color: #f0e6cd;
      content: "";
      position: absolute;
      right: -57%;
      top: -40%;
      /* height: 48%; */
      line-height: 1.5em;
      padding: 0.6em;
      border: 5px solid #903534;
      z-index: 2;
      display: none;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: font3;

      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* 这里有问题为什么不能通过active实现渐渐显示 */
    .box:hover > .bac1 > .bac-p.active {
      opacity: 1;
      transform: scale(1);
      z-index: 300;
    }
    .bac-p::after {
      content: "";
      position: absolute;
      width: 15%;
      height: 20%;
      border-radius: 50%;
      background-color: #903534;
      left: -9%;
      bottom: -14%;
    }
    .bac-p > div {
      height: 100%;
      border: 3px solid #903534;
      padding: 4px;
      padding-top: 10px;
      font-size: 1.4em;
      text-align: center;
    }
    .bac-p > div > p {
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 1.4em;
      font-weight: bold;
    }
    .box > span {
      height: 13%;
      display: flex;
      justify-content: center;
      align-content: center;
      background-color: #fff;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      margin-top: 2px;
      border: 1px;

      font-size: 2.6em;
      font-family: font3;
    }
    .box:hover > span {
      opacity: 0;
    }
    .box:hover {
      flex-basis: 40%;
      /* overflow: hidden; */
    }
    /* .box:hover>.bac1>.bac-p{
    display: block;
} */

    .box:hover > .bac1 {
      width: 90%;
      height: 90%;
      margin-left: 5%;
      margin-top: 3%;
      margin-bottom: 5%;

      border: 4px solid #903534;
    }
    .box:hover > .bac1-1 {
      background-image: url(../img/kind/3_1_1.png);
    }
    .box:hover > .bac2 {
      background-image: url(../img/kind/3-2-2.png);
    }
    .box:hover > .bac3 {
      background-image: url(../img/kind/3-3-3.png);
    }
    .box:hover > .bac4 {
      background-image: url(../img/kind/3-4-4.png);
    }
    .box:hover > .bac5 {
      background-image: url(../img/kind/3_5_5.png);
    }

    .box:hover > .bac1 > .produce > img {
      width: 25%;
      display: flex;
      transform: translateX(2%);
    }

    .box:hover > .bac1 > .produce3 > img {
      width: 25%;
      display: flex;
    }

    .box:hover > .bac1 > .produce5 > img {
      width: 25%;
      display: flex;
      transform: translateX(5%);
    }

    .box:hover > .bac1 > .produce {
      height: 100%;
      width: 100%;
      border: 0;
      margin: 0;
      background-color: transparent;
    }
    .produce {
      height: 98%;
      width: 46%;
      border: 2px solid #903534;
      margin-top: 2%;
      margin-left: 1.5%;
      border-radius: 9px;
      background-color: #e67762;
    }
    .produce2 {
      background-color: #e8b49a;
    }
    .produce.produce2 > img {
      transform: translateY(1%);
    }

    .produce3 {
      background-color: #80a492;
    }
    .produce4 {
      background-color: #bed2bb;
    }
    .produce5 {
      background-color: #f2e6ce;
    }
    .produce > img {
      margin-left: -4px;
      height: 100%;
      width: 100%;
      transform: translateX(-0.3%);
    }
    .produce3 > img {
      margin-left: -4px;
      height: 100%;
      width: 100%;
      transform: translateX(4.7%);
    }
    .produce5 > img {
      margin-left: -4px;
      height: 100%;
      width: 100%;
      transform: translateX(4.7%) translateY(5%);
    }

    .bac-p {
      width: 67%;
    }
    .bac-p3 {
      width: 100%;
    }
    .bac-p4 {
      width: 50%;
    }
    .bac-p3 {
      width: 78%;
    }
    .bac-p3::after {
      width: 40px;
      height: 40px;
      left: 0;
      bottom: 0;
      transform: translateY(50%) translateX(-50%);
      border: 100%;
    }

    /* 人物 */
    .people {
      position: absolute;
      display: flex;
      background-image: url(../img/people/精灵-0.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 20%;
      height: 50%;
      max-width: 391px;
      max-height: 350px;
      bottom: 2%;
      left: 2%;
      opacity: 0.6;
      transition: all 0.5s ease;
    }
    .people.active {
      opacity: 0.6;
    }

    /* 竹子 */
    .zuzi {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 10%;
      height: 50%;
      right: 0;
      background-image: url("../img/introduce/zuzixia.png");
      background-size: 240% 120%;
      background-position: 73% 100%;
      transform: rotate(10deg) translateX(10%);
      z-index: 3;
    }
    .zuzi2 {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 10%;
      height: 50%;
      right: 0;
      background-image: url("../img/introduce/zuzixia.png");
      background-size: 210% 120%;
      background-position: 95% 100%;
      transform: rotate(-24deg);
      z-index: 3;
    }
    .zuzi3 {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 10%;
      height: 50%;
      right: 0;
      background-image: url("../img/introduce/zuzixia.png");
      background-size: 240% 120%;
      background-position: 85% 100%;
      transform: rotate(0deg);
      z-index: 3;
    }
    /* 切换按钮 */
    .lef-btn {
      display: flex;
      justify-content: center;
      width: 11%;
      position: absolute;
      left: 0;
      transform: rotate(50deg) translateX(-60%);
      top: 45%;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.5s ease;
    }
    .lef-btn:hover {
      opacity: 1;
    }
    .lef-btn > img {
      width: 100%;
    }
    .right-btn {
      display: flex;
      justify-content: center;
      width: 11%;
      position: absolute;
      right: 0;
      transform: rotate(-65deg) translateY(40%);
      z-index: 10;
      top: 47%;
      cursor: pointer;
      opacity: 0.7;
      transition: all 0.5s ease;
    }
    .right-btn:hover {
      opacity: 1;
    }
    .right-btn > img {
      width: 100%;
    }
    /* 鼠标跟随 */
    #follower {
      position: absolute;
      z-index: 999;
      transition: transform 0.1s ease;
      width: 20px;
      height: 20px;

      background-color: rgba(212, 38, 38, 0.4);
      position: absolute;
      border-radius: 50%; /* 将方形 div 变成圆形 */
      pointer-events: none;
    }
    /* 按钮 */
    .right-btn:hover > img:nth-child(2) {
      opacity: 0.7;
    }
    .right-arr {
      display: flex;
      justify-content: center;
      width: 25%;
      height: 25%;
      position: absolute;
      z-index: 10;
      left: 7%;
      opacity: 0;
      top: 9%;
      transform: scaleX(-1) scaleX(100%) scaleY(70%) rotate(-20deg);
      cursor: pointer;
      transition: all 0.5s ease;
    }
    .left-btn {
      display: flex;
      justify-content: center;
      width: 25%;
      height: 25%;
      top: 10%;
      transform: scaleX(100%) scaleY(70%);
      position: absolute;
      cursor: pointer;
      opacity: 0;
      transition: all 0.5s ease;
    }
    .lef-btn:hover > img:nth-child(2) {
      opacity: 0.7;
    }
  </style>
  <body>
    <div class="container">
      <div id="follower"></div>
      <div class="header">
        <div class="header-left">
          <div class="logo"></div>
          <div class="title">
            <span>花纹式样</span>
          </div>
        </div>
        <div class="header-right">
          <ul>
            <li><a href="./introduce.html">初识</a></li>
            <li><a href="./history.html">远溯</a></li>
            <li class="active"><a href="./kind.html">览境</a></li>
            <li><a href="./structure.html">匠艺</a></li>
          </ul>
        </div>
      </div>
      <div class="main">
        <div class="shell">
          <div class="box">
            <div class="bac1 bac1-1">
              <div class="bac-p">
                <div>
                  <p>《簪花仕女图》</p>
                  团扇绘画多以花鸟类题材、动物类题材为主，兼有山水人物等。画面兼有团花纹
                </div>
              </div>
              <div class="produce">
                <img src="../img/kind/3_1.png" alt="" />
              </div>
            </div>
            <span>花鸟</span>
          </div>
          <div class="box">
            <div class="bac1 bac2">
              <div class="bac-p">
                <div>
                  <p>《洛神赋》</p>
                  山水也是团扇扇面主要花纹，洛神赋中洛神手中的“元嘉团扇”就是天姥山的美丽风景
                </div>
              </div>
              <div class="produce produce2">
                <img src="../img/kind/3_2.png" alt="" />
              </div>
            </div>
            <span>山水</span>
          </div>
          <div class="box">
            <div class="bac1 bac3">
              <div class="bac-p bac-p3">
                <div>
                  <p>《八十七神仙卷》</p>
                  符号几何纹样，但其内容的展现以及出现的场合，多与道教、佛教等宗教类相关。
                </div>
              </div>
              <div class="produce produce3">
                <img src="../img/kind/3-3.png" alt="" />
              </div>
            </div>
            <span>几何</span>
          </div>
          <div class="box">
            <div class="bac1 bac4">
              <div class="bac-p">
                <div>
                  <p>《调鹦图》</p>
                  这是北宋王局正绘制的扇面图，可见人物也是扇面的主要花纹之一
                </div>
              </div>
              <div class="produce produce4">
                <img src="../img/kind/3-4.png" alt="" />
              </div>
            </div>
            <span>人物</span>
          </div>
          <div class="box">
            <div class="bac1 bac5">
              <div class="bac-p">
                <div>
                  <p>《月夜看潮图》</p>
                  这是南宋李嵩所画的扇面图，还有许多扇面花纹以建筑为主体
                </div>
              </div>
              <div class="produce produce5">
                <img src="../img/kind/3_5-5.png" alt="" />
              </div>
            </div>
            <span>建筑</span>
          </div>
        </div>
        <!-- people -->
        <div class="people active"></div>
        <!-- 这里吧右下角的竹子去了 -->
        <div class="zuzi"></div>
        <div class="zuzi2"></div>
        <div class="zuzi3"></div>
      </div>
      <div class="lef-btn">
        <img src="../img/last-btn.png" alt="" />
        <img class="left-btn" src="../img/left-btn.svg" alt="" />
      </div>
      <div class="right-btn">
        <img src="../img/next-6-btn.png" alt="" />
        <img class="right-arr" src="../img/left-btn.svg" alt="" />
      </div>
      <audio id="audio" loop>
        <source src="../audio/bacmusic3.MP3" />
      </audio>
    </div>
  </body>
</html>
<script>
  (() => {
    window.onload = () => {
      initBody();
      initFollow();
      initImg();
      btn();
      initRoute();

      player();
      loclaMusic();
    };
  })();

  // 播放
  // 保存播放状态
  function loclaMusic() {
    // 从本地存储中获取保存的播放状态
    const savedPlaybackState = localStorage.getItem("playbackState");

    // 如果有保存的播放状态
    if (savedPlaybackState) {
      const playbackState = JSON.parse(savedPlaybackState);

      // 设置音频的播放位置
      audio.currentTime = playbackState.currentTime;

      // 如果播放状态为播放中，则继续播放音频
      if (playbackState.isPlaying) {
        audio.play();
      }
    }
  }

  // 保存播放状态到本地存储
  function savePlaybackState(isPlaying) {
    const playbackState = {
      currentTime: audio.currentTime,
      isPlaying: isPlaying,
    };

    localStorage.setItem("playbackState", JSON.stringify(playbackState));
  }

  function player() {
    let audio = document.getElementById("audio");
    let time = 0;
    let language = document.getElementById("language");
    audio.volume = 0.65;
    document.addEventListener("click", () => {
      audio.play();
    });
    // 结束 给人透明

    // 当音频播放或暂停时，保存播放状态到本地存储
    audio.addEventListener("play", () => {
      savePlaybackState(true);
    });

    audio.addEventListener("pause", () => {
      savePlaybackState(false);
    });

    // 当音频播放位置发生变化时，实时更新播放状态到本地存储
    audio.addEventListener("timeupdate", () => {
      savePlaybackState(true);
    });
  }

  function initRoute() {
    const lis = document.querySelectorAll(".header-right>ul > li");
    const home = document.querySelector(".logo");
    home.addEventListener("click", () => {
      window.location.href = "../index.html";
    });
    lis.forEach((li, index) => {
      if (index !== 2) {
        li.addEventListener("mouseover", () => {
          lis[2].classList.remove("active");
        });
        li.addEventListener("mouseleave", () => {
          lis[2].classList.add("active");
        });
      }
    });
  }

  function initImg() {
    // 图片悬浮
    const boxs = document.querySelectorAll(".box");
    const bac_p = document.querySelectorAll(".bac-p");

    function pictures() {
      for (let i = 0; i < boxs.length; i++) {
        boxs[i].addEventListener("mouseover", function () {
          bac_p[i].style.display = "block";
          setTimeout(() => {
            bac_p[i].classList.add("active");
          }, 400);
        });
        boxs[i].addEventListener("mouseout", function () {
          bac_p[i].style.display = "none";
          bac_p[i].classList.remove("active");
        });
      }
    }

    pictures();
  }
  // 按钮
  function btn() {
    const leftBtn = document.querySelector(".lef-btn");
   
    const rightBtn = document.querySelector(".right-btn");
    leftBtn.addEventListener("click", () => {
      window.location.href = "./history.html";
    });
    rightBtn.addEventListener("click", () => {
      window.location.href = "./kindT.html";
    });
  }
  function initFollow() {
    const follower = document.querySelector("#follower");
    window.addEventListener("mousemove", (event) => {
      const mouseX = event.clientX;
      const mouseY = event.clientY;
      // 计算偏移量，使 follower 在鼠标中心
      const offsetX = mouseX - follower.offsetWidth / 3;
      const offsetY = mouseY - follower.offsetHeight / 3;
      // 设置 follower 的位置
      follower.style.left = `${offsetX}px`;
      follower.style.top = `${offsetY}px`;
    });
  }

  function initBody() {
    const main = document.querySelector(".main");
    setTimeout(() => {
      main.style.opacity = "1";
    }, 5);
  }

  function peopleOpacity() {
    const people = document.querySelector(".people");
    setTimeout(() => {
      people.classList.remove("active");
    }, 3000);
  }
</script>
